<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发布帖子</title>
    <script  th:src="@{/airent/js/vue.js}" type="text/javascript"></script>
    <link rel="stylesheet" th:href="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/airent/common/css/nav.css}">
    <link rel="stylesheet" th:href="@{/airent/css/issuepost.css}">
    <link rel="stylesheet" th:href="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/css/fileinput.min.css}" type="text/css" >
    <!--<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" crossorigin="anonymous">-->
    <link href="https://cdn.bootcss.com/font-awesome/5.13.0/css/all.css" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/themes/explorer-fas/theme.min.css}">
    <link rel="stylesheet" th:href="@{/airent/plugins/other/animate.min.css}">
    <link rel="stylesheet" th:href="@{/airent/common/css/footer.css}">
    <link rel="stylesheet" th:href="@{/airent/plugins/jquery-ui-1.12.1.custom/jquery-ui.min.css}">

<style>
    .modal-dialog {
        position: absolute;
        width: 500px;
        margin-left: 700px;
        margin-top: 80px;
        z-index: 9999999;
    }
</style>

</head>

<body>

<div  class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" >
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">提示</h4>
            </div>
            <div class="modal-body">
                <div class="input-group">
                    <div class="form-group">
                        <span id="tips" style="color: #ff0000;"></span>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<div th:replace="~{head/topbar::topBar(activeUri = 'roommate')}"></div>
<div id="findRoommate">
    <div class="container col-md-8 offset-md-2">
        <div class="post-heading"><h3>写写您对室友的期望吧！</h3></div>
            <div class="form-group row">
                <label for="title" class="col-sm-2 col-form-label">帖子标题(必填)</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="title" maxlength="20" v-model="cotenancyTitle"  placeholder="帖子标题最多20个字" required="required">
                </div>
            </div>
            <div class="form-group row">
                <label for="title" class="col-sm-2 col-form-label">房源编号(必选)</label>
                <div class="col-sm-10">
                    <select v-model="houseNumber">
                        <option th:each="h:${house}" th:value="${h.houseNumber}" th:text="${h.houseNumber}"></option>
                    </select>
                    <!--<input type="text" class="form-control" id="resource" maxlength="20" v-model="houseNumber"  placeholder="请输入房源ID" required="required">-->
                </div>
            </div>
            <div class="form-group row">
                <label for="title" class="col-sm-2 col-form-label">房租价格(必填)</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="price" v-model="cotenancyPrice"  placeholder="单位: 元/月" required="required">
                </div>
            </div>
            <div class="form-group row">
                <label for="personal" class="col-sm-2 col-form-label">个人介绍(必填)</label>
                <div class="col-sm-10">
                    <textarea class="form-control" id="personal" maxlength="500" placeholder="请输入个人介绍" v-model="introduce" required="required"></textarea>
                </div>
            </div>
            <div class="form-group row">
                <!-- <div>
                    <button onclick="UM.getEditor('editor').setHide()">隐藏编辑器</button>
                    <button onclick="UM.getEditor('editor').setShow()">显示编辑器</button>
                </div> -->
                <label for="content" class="col-sm-2 col-form-label">帖子内容(必填)</label>
                <div class="col-sm-10">
                    <textarea class="form-control" id="content" maxlength="1000" placeholder="请输入帖子内容" v-model="content" required="required"></textarea>
                </div>
            </div>
            <div class="form-group row">
                <label for="content" class="col-sm-2 col-form-label">留言备注(必填)</label>
                <div class="col-sm-10">
                    <textarea class="form-control" id="remarks" maxlength="100" placeholder="请输入留言备注" v-model="remarks" required="required"></textarea>
                </div>
            </div>
            <div class="form-group row">
                <label for="title" class="col-sm-2 col-form-label">联系方式(必填)</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="tel" maxlength="11" placeholder="请输入电话号码" v-model="userTel" required="required">
                </div>
            </div>
            <fieldset class="form-group">
                <div class="row">
                    <legend class="col-form-label col-sm-2 pt-0">室友性别(必选)</legend>
                    <div class="col-sm-10">
                        <div class="form-check">
                            <input class="form-check-input" type="radio" v-model="roommateGender" id="gridRadios3"
                                   value="男女不限">
                            <label class="form-check-label" for="gridRadios3">
                                男女不限
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" v-model="roommateGender" id="gridRadios1"
                                   value="仅限男生" >
                            <label class="form-check-label" for="gridRadios1">
                                仅限男性
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" v-model="roommateGender"  id="gridRadios2"
                                   value="仅限女生">
                            <label class="form-check-label" for="gridRadios2">
                                仅限女性
                            </label>
                        </div>

                    </div>
                </div>
            </fieldset>
            <div class="form-group row">
                <label for="file-5" class="col-sm-2 col-form-label">上传封面(必传)</label>
                    <div class="form-group col-md-10">
                        <form enctype="multipart/form-data" action="/cotenancy/addImg" method="post">
                            <div class="file-loading">
                                <input id="file-5" name="imgs" type="file" multiple>
                            </div>
                        </form>
                    </div>


            </div>

            <div class="form-group row">
                <div class="col-md-6 offset-md-5">
                    <button type="button" class="btn btn-success" id="post" @click="addPost">发布帖子</button>
                </div>
            </div>



    </div>
</div>
<div th:replace="~{food/bottombar::topBar}"></div>

    <script th:src="@{/airent/plugins/jquery/jquery.min.js}"></script>
    <script th:src="@{/airent/plugins/jquery-ui-1.12.1.custom/jquery-ui.min.js}"></script>
    <script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/js/plugins/piexif.min.js}"></script>
    <script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/js/plugins/sortable.min.js}"></script>
    <script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/js/plugins/purify.min.js}"></script>
    <script th:src="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/js/bootstrap.bundle.min.js}"></script>
    <script th:src="@{/airent/js/fileinput.min.js}"></script>
    <!--<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fhttps://cdn.bootcdn.net/ajax/libs/bootstrap-fileinput/5.0.1/js/fileinput.min.jsileinput-ca58fbf/js/fileinput.min.js}"></script>-->
    <script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/js/locales/LANG.js}"></script>
    <script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/js/locales/zh.js}" type="text/javascript"></script>
    <script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/themes/fas/theme.min.js}" type="text/javascript"></script>
    <script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/themes/explorer-fas/theme.min.js}" type="text/javascript"></script>
    <script th:src="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/js/bootstrap.min.js}"></script>

    <script th:inline="javascript">
        let vueApp = new Vue({
            el:"#findRoommate",
            data:{
                cotenancyTitle:"",
                houseNumber:"",
                cotenancyPrice:0,
                introduce:"",
                content:"",
                remarks:"",
                userTel:"",
                roommateGender:"",
                img:[],
                imgPath:[],
            },
            methods:{
                addPost:function (){
                    let tip = document.getElementById("tips");
                    let imgPath = vueApp.imgPath;
                    let cotenancyTitle = vueApp.cotenancyTitle;
                    let houseNumber = vueApp.houseNumber;
                    let cotenancyPrice = vueApp.cotenancyPrice;
                    let introduce = vueApp.introduce;
                    let content = vueApp.content;
                    let remarks = vueApp.remarks;
                    let userTel = vueApp.userTel;
                    let roommateGender = vueApp.roommateGender;
                    let url = "/cotenancy/addPost";
                    let priceReg = /^[1-9][0-9]{2,3}$/;
                    let titleReg = /[a-zA-Z0-9_]/;
                    let telReg = /^[1][3,4,5,7,8][0-9]{9}$/;
                    cotenancyData={
                        cotenancyTitle:vueApp.cotenancyTitle,
                        houseNumber:vueApp.houseNumber,
                        cotenancyPrice:vueApp.cotenancyPrice,
                        introduce:vueApp.introduce,
                        content:vueApp.content,
                        remarks:vueApp.remarks,
                        userTel:vueApp.userTel,
                        roommateGender:vueApp.roommateGender,
                        imgPath:vueApp.imgPath
                    }  ;
                    if (cotenancyTitle == null || cotenancyTitle == ""){
                        tip.innerHTML="标题不能为空！";
                        $('#myModal').modal('show');
                    }else if (houseNumber == null || houseNumber == ""){
                        tip.innerHTML="房源编号不能为空！";
                        $('#myModal').modal('show');
                    }else if(cotenancyPrice == null || cotenancyPrice == ""){
                        tip.innerHTML="价格不能为空！";
                        $('#myModal').modal('show');
                    }else if(!priceReg.test(cotenancyPrice) ){
                        tip.innerHTML="价格只能是非0开头的3-4位数字！";
                        $('#myModal').modal('show');
                    }else if(introduce == null || introduce == ""){
                        tip.innerHTML="个人介绍不能为空！";
                        $('#myModal').modal('show');
                    }else if(content == null || content == ""){
                        tip.innerHTML="帖子内容不能为空！";
                        $('#myModal').modal('show');
                    }else if(remarks == null || remarks == ""){
                        tip.innerHTML="备注不能为空！";
                        $('#myModal').modal('show');
                    }else if(userTel == null || userTel == ""){
                        tip.innerHTML="电话不能为空！";
                        $('#myModal').modal('show');
                    }else if(!telReg.test(userTel)){
                        tip.innerHTML="电话格式不正确！";
                        $('#myModal').modal('show');
                    }else if(roommateGender == null || roommateGender == ""){
                        tip.innerHTML="请选择性别！";
                        $('#myModal').modal('show');
                    }else if (imgPath == null || imgPath == ""){
                        tip.innerHTML="请先上传图片!！";
                        $('#myModal').modal('show');
                    }else {
                        $.post(url,cotenancyData,function (result){
                            if (result == "1"){
                                tip.innerHTML="提交成功，请等待审核！！";
                                $('#myModal').modal('show');
                                location.href = "/roommate";
                            }else {
                                tip.innerHTML="您已经发布了该房源！";
                                $('#myModal').modal('show');
                            }
                        },"Json");
                    }
                },
                addImgs:function (){
                    var formData = new FormData();
                    var pic = document.getElementById("goodsDetailPic").files;
                    for(var j=0;j<pic.length;j++){
                        formData.append('goodsPhoto[]',pic[j]);
                    }
                }
            },
/*            created:function (){
                let url = "/houseUser/showAllHouseNumber";
                let param = "userId="+[[${session.user.userId}]];
                $.post(url,param,function (result){
                    console.log(result);
                },"Json")
            }*/
        })
    </script>
<script>



    $(document).ready(function () {
        $("#file-5").fileinput({
                theme: 'fas',
                language: 'zh',
                uploadUrl: "/houseUser/upload", // 服务器端上传处理程序
                /*minFileCount: 1, //最小上传文件数为1
                maxFileCount: 5, //最大上传文件数为5
                multiple: false, //异步上传*/
                // uploadAsync: false,
                // showUpload : false
                // showUpload: true, //是否显示上传按钮
                // showRemove : true, //显示移除按钮
                // showPreview : true, //是否显示预览
                // showCaption: false,//是否显示标题
                // autoReplace : true,
                minFileCount: 0,
                uploadAsync: true,
                maxFileCount: 5,//最大上传数量
                browseOnZoneClick: true,
                msgFilesTooMany: "选择上传的文件数量 超过允许的最大数值！",
                enctype: 'multipart/form-data',
                // overwriteInitial: false,//不覆盖已上传的图片
                allowedFileExtensions : [ "jpg", "png", "gif" ],
                browseClass : "btn btn-primary", //按钮样式
                previewFileIcon : "<i class='glyphicon glyphicon-king'></i>",
                layoutTemplates :{
                    actionDelete:'', //去除上传预览的缩略图中的删除图标
                    // actionUpload:'',//去除上传预览缩略图中的上传图片；
                    actionZoom:''   //去除上传预览缩略图中的查看详情预览的缩略图标。
                },
            },

        )
    }).on('fileuploaded', function (event, data, previewId, index) {//异步上传成功结果处理
        //图片路径 data.response.success
        // vueApp.imgPath=data.response.success
        addPath(data.response.success)
    }).on('fileerror', function (event, data, msg) {//异步上传失败结果处理
        alert(data.response.success)
    }).on('fileuploaderror', function (event, data, msg) {//异步上传失败结果处理
        alert(data.response.success)
    })


    function addPath(path) {
        let list = vueApp.imgPath
        list.push(path)
        vueApp.imgPath = list
    }

</script>

<script th:inline="javascript">



    $(function() {
      $( "#datepicker" ).datepicker();
    });
    </script>
</body>

</html>
